<template>
  <div class="most-expect-wrapper">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-more">
          <a
            href="/board/6"
            class="textcolor_orange"
            data-act="all-mostExpect-click"
          >
            <span>查看完整榜单</span>
          </a>
          <span class="panel-arrow panel-arrow-orange"></span>
        </span>
        <span class="panel-title">
          <span class="textcolor_orange"><h2>最受期待</h2></span>
        </span>
      </div>
      <div class="panel-content">
        <ul class="ranking-wrapper ranking-mostExpect">
          <li class="ranking-item ranking-top ranking-index-1">
            <a
              href="/films/1443511"
              target="_blank"
              data-act="mostExpect-movie-click"
              data-val="{movieid:1443511}"
            >
              <div class="ranking-top-left">
                <i class="ranking-top-icon"></i>
                <img
                  class="ranking-img default-img"
                  alt="这么多年电影海报"
                  src="https://p0.pipi.cn/mmdb/fb738602c7ec7ed236b12df935510bdbbc473.jpg?imageView2/1/w/140/h/194"
                />
              </div>
              <div class="ranking-top-right">
                <div class="ranking-top-right-main">
                  <span class="ranking-top-moive-name">这么多年</span>

                  <p class="ranking-release-time">上映时间：2023-04-28</p>

                  <p class="ranking-top-wish">
                    <span class="stonefont"></span>人想看
                  </p>
                </div>
              </div>
            </a>
          </li>

          <li class="ranking-item ranking-index-2">
            <a
              href="/films/1228"
              target="_blank"
              data-act="mostExpect-movie-click"
              data-val="{movieid:1228}"
            >
              <i class="ranking-index">2</i>
              <span class="img-link"
                ><img
                  class="ranking-img default-img"
                  src="https://p0.pipi.cn/friday/19a48137cebaf32d96cc91f049041836.jpg?imageView2/1/w/170/h/118"
                  alt="天空之城电影海报"
              /></span>
              <div class="name-link ranking-movie-name">天空之城</div>

              <span class="ranking-num-info"
                ><span class="stonefont"></span>人想看</span
              >
            </a>
          </li>

          <li class="ranking-item ranking-index-3">
            <a
              href="/films/341224"
              target="_blank"
              data-act="mostExpect-movie-click"
              data-val="{movieid:341224}"
            >
              <i class="ranking-index">3</i>
              <span class="img-link"
                ><img
                  class="ranking-img default-img"
                  src="https://p0.pipi.cn/mmdb/fb73860292392317899235ea82d5aa28f2c2f.jpeg?imageView2/1/w/170/h/118"
                  alt="银河护卫队3电影海报"
              /></span>
              <div class="name-link ranking-movie-name">银河护卫队3</div>

              <span class="ranking-num-info"
                ><span class="stonefont"></span>人想看</span
              >
            </a>
          </li>

          <li class="ranking-item ranking-index-4">
            <a
              href="/films/1451323"
              target="_blank"
              data-act="mostExpect-movie-click"
              data-val="{movieid:1451323}"
            >
              <span class="normal-link">
                <i class="ranking-index">4</i>
                <span class="ranking-movie-name">人生路不熟</span>

                <span class="ranking-num-info">
                  <span class="stonefont"></span>人想看
                </span>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TtmsMostexpect",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.aside .most-expect-wrapper {
  margin-top: 80px;
}
.aside .panel {
  margin: 0;
}
.panel-header {
  overflow: hidden;
  height: 26px;
  line-height: 26px;
}
.panel-more {
  font-size: 14px;
  line-height: 16px;
  float: right;
  margin-top: 10px;
}
.textcolor_orange {
  color: #ffb400 !important;
}
a {
  text-decoration: none;
}
.panel-arrow-orange {
  background: url()
    top no-repeat;
}
.panel-arrow {
  display: inline-block;
  width: 8px;
  height: 14px;
  vertical-align: top;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  margin-top: 23px;
}
.ranking-wrapper {
  overflow: hidden;
}
ul,
ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ranking-mostExpect .ranking-index-1 {
  margin-bottom: 0;
}
.ranking-wrapper .ranking-item {
  overflow: hidden;
}
.ranking-mostExpect .ranking-index-2 .ranking-index, .ranking-mostExpect .ranking-index-3 .ranking-index {
    position: absolute;
    padding-left: 4px;
    width: 16px;
    line-height: 20px;
    color: #fff;
    background-color: #ffb400;
}
.ranking-mostExpect .ranking-index-2 .name-link, .ranking-mostExpect .ranking-index-3 .name-link {
    display: block;
    font-size: 18px;
    color: #333;
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
}
.ranking-mostExpect .ranking-index-2 .ranking-num-info, .ranking-mostExpect .ranking-index-3 .ranking-num-info {
    float: none;
    display: inline-block;
    font-size: 14px;
    margin-top: 6px;
    margin-left: 10px;
}
.ranking-num-info {
    float: right;
    color: #fdb863;
    font-size: 14px;
}
.ranking-item {
  cursor: pointer;
}
.ranking-index-1 {
  margin-bottom: 11px;
  border: 1px solid #efefef;
}
.ranking-mostExpect .ranking-top-left {
  width: 140px;
  height: 194px;
  float: left;
  position: relative;
}
.ranking-mostExpect .ranking-top-right {
  height: 194px;
  line-height: 194px;
}
.ranking-item .ranking-index {
    display: inline-block;
    width: 20px;
}
.ranking-item:hover {
  background-color: #f5f5f5;
}

.ranking-index {
    font-size: 18px;
    color: #999;
    vertical-align: top;
}
.ranking-top-right {
  height: 80px;
  padding-left: 10px;
  line-height: 80px;
  overflow: hidden;
}
.ranking-mostExpect .ranking-top-icon {
  background-image: url();
}
.ranking-top-icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 25px;
  background: url()
    no-repeat;
  background-size: contain;
}
.ranking-mostExpect .ranking-index-1 .ranking-img {
  width: 100%;
  height: 194px;
}
.ranking-img {
  vertical-align: middle;
}
.ranking-mostExpect .ranking-top-right {
  height: 194px;
  line-height: 194px;
}
.ranking-top-right {
  height: 80px;
  padding-left: 10px;
  line-height: 80px;
  overflow: hidden;
}
.ranking-top-right-main {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  width: 200px;
}
.ranking-top-right .ranking-top-moive-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ranking-top-right .ranking-top-moive-name {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: #333;
  line-height: 1.4;
}
.ranking-top-right .ranking-top-wish {
  margin-top: 12px;
  font-size: 14px;
  color: #ffb400;
}
.stonefont {
  font-family: mtsi-font;
}
.ranking-top-right .ranking-release-time {
  margin-top: 12px;
  color: #999;
}
.default-img {
  background-image: url();
  background-position: 50%;
  background-size: 68px 62px;
  background-repeat: no-repeat;
}
img {
  border-style: none;
}
.ranking-mostExpect .ranking-index-2,
.ranking-mostExpect .ranking-index-3 {
  border: 1px solid #efefef;
  position: relative;
  width: 170px;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 8px;
}
.ranking-wrapper .ranking-item {
  overflow: hidden;
}
.ranking-item {
  cursor: pointer;
}
.ranking-mostExpect .ranking-index-4 {
    clear: both;
}
.ranking-item .normal-link {
    display: block;
    height: 35px;
    line-height: 35px;
}
</style>
